<template>
  <div 
     v-if="commentInfo !== null && commentInfo.images !== undefined"
     class="comment-info">
     <div class="info-header">
       <div class="header-title">用户评价</div>
       <div class="header-more">更多<i class="arrow-right"></i></div>
     </div>
     <div class="info-user">
       <img :src="commentInfo.user.avatar" alt="">
       <span>{{commentInfo.user.name}}</span>
     </div>
     <div class="info-detail">
       <p>{{commentInfo.content}}</p>
       <div class="info-other">
         <!-- 时间戳转化 -->
         <span class="data">{{date}}</span>
         <span>{{commentInfo.style}}</span>
       </div>
       <div class="info-imgs">
         <img :src="item" v-for="(item,index) in commentInfo.images" :key="index" alt="">
       </div>
     </div>
  </div>
</template>

<script>
import {formatDate} from '@/common/utils'
export default {
  name: 'DetailCommentInfo',
  props: {
    commentInfo:{
      type:Object,
      default(){
        return {}
      }
    }
  },
  computed: {
    date(){
      // 1.将时间戳转化成Date对象
      const date = new Date(this.commentInfo.created * 1000)
      // 2.
      return formatDate(date,'yyyy-MM-dd')
    }
  }
 }
</script>

<style scoped>
.comment-info{
  padding: 5px 12px;
  color: #333;
  border-bottom: 5px solid #728599;
}
.info-header{
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.header-title{
  float: left;
}
.header-more{
  float: right;
}

.info-user {
  padding: 10px 0 5px;
}
.info-user img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}
.info-user span {
  position: relative;
  font-size: 15px;
  top: -15px;
  margin-left: 10px;
}

.info-detail {
  padding: 0 5px 15px;
}
.info-detail p{
  font-size: 14px;
  color: #777;
  line-height: 1.5;
}
.info-detail .info-other {
  font-size: 12px;
  color: #999;
  margin-top: 10px;
}
.info-detail .data {
  margin-right: 8px;
}
.info-imgs img {
  width: 70px;
  height: 70px;
  margin-right: 5px;
}
</style>